<template>
	<view v-show="dataInfo.imgUrl">
		<!-- 跳过 -->
		<view :class="['u-f-28 ad-btn', time ? 'disabled-click' : '']" @click="jumpIndex">{{ lang_common.pass }}{{ time > 0 ? (time + 'S') : '' }}</view>
		
		<!-- 广告 -->
		<view class="ad-container">
			<image :src="showImage(dataInfo.imgUrl)" @load="imgLoad" @error="imgError" style="width: 100vw; height: 100vh" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import { Banner } from '@/api/base.js'
	import { BASE_URL, USER_TYPE } from '@/config.js'
	export default {
		data() {
			return {
				time: 3,
				timer: null,
				authPass: false
			}
		},
		computed: {
			dataInfo() {
				let list = this.$store.state.common.advertList || []
				return list[0] || {}
			}
		},
		created() {
			if (!this.dataInfo.imgUrl) {
				this.imgError()
			}
		},
		methods: {
			// 进入首页
			jumpIndex() {
				// 允许跳转，并直接跳转到首页
				if (this.authPass) {
					let accountType = uni.getStorageSync(USER_TYPE) || 'user'
					uni.reLaunch({
						url: `/pages/tabbar/${ accountType }/index/index`
					})
				}
			},
			// 图片资源加载完毕，触发倒计时
			imgLoad() {
				uni.getImageInfo({
					src: this.dataInfo.image,
					success: res => {
						this.timer = setInterval(() => {
							this.time--
							if (this.time <= 0) {
								this.time = 0
								this.authPass = true
								clearInterval(this.timer)
							}
						}, 1000)
					},
					fail: e => {
						this.time = 0
						this.authPass = true
					}
				})
			},
			imgError() {
				this.authPass = true
				this.jumpIndex()
			}
		}
	}
</script>

<style scoped lang="scss">
	.ad {
		&-btn {
			position: fixed;
			top: calc(var(--status-bar-height) + 20rpx);
			right: 20rpx;
			z-index: 1;
			padding: 10rpx 20rpx;
			color: #ffffff;
			background-color: #FF3A2F;
			border-radius: 6rpx;
		}
		
		&-container {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 0
		}
	}
	
	.disabled-click {
		background-color: #ddd;
	}
</style>
